<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <div id="orientlist">
        <h2>朝向列表</h2>
        <el-form :inline="true" class="demo-form-inline">

            <el-form-item label="朝向名称">
                <el-input v-model="orientName" placeholder="朝向名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getorientList" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="orientList" style="width: 100%" stripe border>
            <el-table-column type="index" label="序号" style="width:25%">
            </el-table-column>
            <el-table-column prop="orientId" label="类型编号" style="width:25%" v-if="false">
            </el-table-column>
            <el-table-column prop="orientName" label="类型名称" style="width:25%">
            </el-table-column>

            <el-table-column label="操作" style="width:25%">
                <template slot-scope="scope">
                    <el-button size="mini" @click="preUpdate(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="deleteById(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[2,5,10,20]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <el-dialog title="修改房屋类型" :visible.sync="dialogVisible" width="60%">
            <el-form ref="updateform" :model="orientObj" label-width="100px" style="width:500px">

                <el-form-item label="类型编号">
                    <el-input v-model="orientObj.orientId" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="类型名称">
                    <el-input v-model="orientObj.orientName"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="update">修改</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

    </div>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>

    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript">
        let v = new Vue({
            el: "#orientlist",
            data: {
                orientList: [],
                currentPage: 1, //当前页码
                size: 2, //每页显示的条数
                total: -1, //总记录数
                orientName: "",
                dialogVisible: false,//控制 el-dialog是否显示

                orientObj: {
                    orientId: "",
                    orientName: ""

                }
            },
            created() {
                this.getorientList();
            },
            methods: {
                getorientList: function () {
                    let that = this;
                    let str = "curPage=" + this.currentPage + "&size=" + this.size + "&orientName=" + this.orientName;
                    axios.post("/housesOrient/selectByNameByPageInfo", str).then(function (r) {
                        if (r.data.state == "success") {
                            that.orientList = r.data.housesorientlist;
                            that.total = r.data.total;
                        }
                    });
                },

                handleSizeChange: function (val) { //val--size   size改变时
                    this.size = val;
                    this.getorientList();
                },
                handleCurrentChange: function (val) { //val--currentPage  当前页码改变时
                    this.currentPage = val;
                    this.getorientList();
                },
                deleteById: function (index, row) {//index 索引位置  row当前的jsonObject对象
                    //js confirm 
                    let aid = row.orientId;
                    let that = this;

                    axios.get("/housesOrient/delete?orientId=" + aid).then(function (r) {
                        if (r.data.state == "success") {

                            //当前页面 数据  删
                            //删除这个索引位置的元素
                            // splice js中的数组函数  参数1 索引位置  参数2 删除数量
                            that.orientList.splice(index, 1);
                            that.$message.success("删除成功！");
                        }
                    }).catch(function (error) {
                        that.$message.error("删除失败！");
                    });
                },
                preUpdate: function (index, row) {//准备修改
                    this.dialogVisible = true;
                    //表单元素设置默认值
                    this.orientObj = this.orientList[index];
                },
                update: function () {
                    let that = this;
                    let fm = new FormData();
                    if (that.orientObj.orientName + '' == "") {
                        that.$message.error("请输入朝向信息！");
                    }

                    else {
                        fm.append("orientId", this.orientObj.orientId);
                        fm.append("orientName", this.orientObj.orientName);
                        axios.post("/housesOrient/update", fm).then(function (r) {
                            //关闭修改对话框
                            setTimeout("location.href = 'housesOrientList.html'", 1000);
                            that.dialogVisible = false;

                            that.$message.success("修改成功！");
                        });
                    }
                }
            }
        });
    </script>
</body>

</html>